<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getSearchAralmApi
} from '@/api/alarm'
// props

// 定义变量
// 控制弹框显隐
const AlarmListVisible = ref(false)
// 类型Options
const typeOptions = ref([
  {
    value: '201',
    label: '温度报警'
  },
  {
    value: '202',
    label: '一氧化碳'
  },
  {
    value: '203',
    label: '甲烷'
  },
  {
    value: '204',
    label: '烟感'
  },
  {
    value: '205',
    label: '粉尘'
  },
  {
    value: '206',
    label: '明火煤'
  },
  {
    value: '207',
    label: '温感电缆'
  },
  {
    value: '208',
    label: '氧气'
  }
])
// 选择的类型
const alarmType = ref('206')
// 选择的时间
const time = ref([ '', '' ])
// 输入的位置
const key = ref('')
// 展示的数据源
const alarmList = ref([])
// 当前页码
const currentPage = ref(1)
// 数据总数
const pageTotal = ref(1000)

// 监听器
watch(currentPage, async (nv, ov) => {
  let data = {
    type: alarmType.value,
    creationTimeStart: time.value[0],
    creationTimeEnd: time.value[1],
    maxResultCount: 10,
    skipCount: (nv - 1) * 10
  }
  getAlarmData(data)
})

// 定义方法
// 展示弹框
const showAlarmList = async () => {
  let data = {
    type: alarmType.value,
    maxResultCount: 10,
    skipCount: 0
  }
  getAlarmData(data)
  console.log('展示报警配置------>')
  AlarmListVisible.value = true
}

// 查询设备信息
const queryDevice = async () => {
  let data = {
    type: alarmType.value,
    creationTimeStart: time.value[0],
    creationTimeEnd: time.value[1]
  }
  getAlarmData(data)
  console.log('点击查询---->', alarmType.value, time.value, key.value)
}

// 网络请求获取数据
const getAlarmData = async (data: any) => {
  let res = await getSearchAralmApi(data)
  if (res.code === -1) {
    ElMessage({
      // message: `${res.message}`,
      message: '网络请求中断获取数据错误！',
      type: 'warning'
    })
    return
  }
  alarmList.value = fixDeviceType(res.result.items)
  pageTotal.value = res.result.totalCount
}

// 清洗数据
const fixDeviceType = (arr: any) => {
  console.log('未处理的数据------>', arr)
  arr.forEach((item: any, index: number) => {
    console.log('未处理的数据------>', item)
    arr[index].creationTime = item.creationTime.split('T')[0] + ' ' + item.creationTime.split('T')[1].split('.')[0]
    switch (item.type) {
    case '201':
      arr[index].type = '温度报警'
      break
    case '202':
      arr[index].type = '一氧化碳'
      break
    case '203':
      arr[index].type = '甲烷'
      break
    case '204':
      arr[index].type = '烟感'
      break
    case '205':
      arr[index].type = '粉尘'
      break
    case '206':
      arr[index].type = '明火煤'
      break
    case '207':
      arr[index].type = '温感电缆'
      break
    case '208':
      arr[index].type = '氧气'
      break
    }
  })
  console.log('处理后的数据------>', arr)
  return arr
}

// 清除查询条件
const clearQueryData = () => {
  time.value[0] = ''
  time.value[1] = ''
  key.value = ''
  currentPage.value = 1
}

// 向外暴露的函数
defineExpose({
  showAlarmList
})
</script>

<template>
  <el-dialog
    v-model="AlarmListVisible"
    class="alarm-list-dialog"
    @close="clearQueryData"
  >
    <template #header>
      <div class="alarm-header-box">
        <div class="title">
          报警明细
        </div>
      </div>
    </template>
    <div class="filter-box">
      <el-select
        v-model="alarmType"
        disabled
        class="infrar-state"
        placeholder="请选择类型"
      >
        <template #prefix>
          <div>报警类型</div>
        </template>
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-date-picker
        v-model="time"
        class="infrar-time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
      <div class="btn-box">
        <div
          class="search-btn"
          @click="queryDevice"
        >
          查询
        </div>
        <div class="icon-divider" />
        <div
          class="clear-btn"
          @click="clearQueryData"
        >
          清空筛选条件
        </div>
      </div>
    </div>
    <div class="alarm-list-table">
      <el-table
        class="device-table"
        :data="alarmList"
        :header-cell-style="{ background: '#f7f8faFF', color: '#6B7785FF' }"
        style="width: 100%"
        height="449"
      >
        <el-table-column
          align="center"
          prop="id"
          label="ID"
          width="180"
        />
        <el-table-column
          align="center"
          prop="type"
          label="报警类型"
          width="120"
        />
        <el-table-column
          align="center"
          prop="level"
          label="报警值"
          width="120"
        />
        <el-table-column
          align="center"
          prop="level"
          label="报警级别"
          width="120"
        />
        <el-table-column
          align="center"
          prop="creationTime"
          label="时间"
        />
        <el-table-column
          align="center"
          prop="sectionName"
          label="位置"
        />
      </el-table>
    </div>
    <div class="pagination-box">
      <el-pagination
        v-model:current-page="currentPage"
        class="alarm-page"
        :page-size="10"
        :pager-count="6"
        layout="prev, pager, next"
        :total="pageTotal"
      />
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.filter-box {
  display: flex;
  height: 32px;
  margin-left: 10px;

  /* border: 1px solid red; */
  .btn-box {
    display: flex;
    margin-left: 30px;
    >div {
      width: 44px;
      height: 20px;
      margin-top: 6px;
      font-weight: 600;
      font-size: 14px;
      font-family: PingFang, sans-serif;
      line-height: 20px;
      text-align: center;
      background-clip: text;
    }
    .search-btn {
      color: #2191ff;
    }
    .search-btn:hover {
      cursor: pointer;
    }
    .clear-btn {
      width: 95px;
    }
    .clear-btn:hover {
      cursor: pointer;
    }
  }
  .icon-divider {
    width: 0 !important;
    height: 12px !important;
    margin-top: 10px !important;
    border: 1px solid #a9aeb8 !important;
  }
  .infrar-state,
  .infrar-posi,
  .infrar-time {
    width: 240px;
    height: 32px;
  }
  .infrar-posi,
  .infrar-time {
    margin-left: 16px;
  }
  .device-page {
    margin-left: 680px;
  }
}
.alarm-list-table {
  width: 940px;
  height: 449px;
  margin-top: 16px;
  margin-left: 10px;
  border-right: 1px solid #e5e6eb;
  border-left: 1px solid #e5e6eb;

  /* border: 1px solid red; */
}
.pagination-box {
  display: flex;
  justify-content: end;
  height: 30px;
  margin-top: 16px;
  padding-left: 670px;

  /* border: 1px solid red; */
}
</style>
<style lang="scss">
.alarm-list-dialog {
  width: 1000px;
  height: 629px;
  .alarm-header-box {
    display: flex;
    margin-left: 10px;
    .title {
      width: 120px;
      height: 28px;
      color: #4e5969;
      font-weight: 600;
      font-size: 20px;
      font-family: PingFang, sans-serif;
      line-height: 23px;
      background-clip: text;
    }
    .position-name {
      width: 252px;
      height: 28px;
      margin-left: 24px;
      color: #2191ff;
      font-weight: 600;
      font-size: 20px;
      font-family: PingFang, sans-serif;
      line-height: 23px;
      background-clip: text;
    }
  }
  .el-dialog__body {
    padding-top: 0;
  }
}
.infrar-state {
  .el-select__popper {
    border: 1px solid red;
  }
}
</style>